<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/admin/bootstrap4/css/bootstrap.css}">
    <script th:src="@{/admin/bootstrap4/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/admin/bootstrap4/js/bootstrap.js}"></script>

</head>

<body>
<br>
<div style="width:80%;height: 600px;margin-left:10% ;">

    <a type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalId2">添加课程</a><br><br>
    <table class="table">
        <thead class="bg-dark" style="color: white">
        <tr>
            <th scope="col">课程ID</th>
            <th scope="col">课程名称</th>
            <th scope="col">课程描述</th>
            <th scope="col">课程图片</th>
            <th scope="col">课程状态</th>
            <th scope="col">课程链接</th>
            <th scope="col">课程类型</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="course:${courseList}" class="text-center my-auto mx-auto">
            <th scope="row" th:text="${course.courseId}"></th>
            <td th:text="${course.courseName}"></td>
            <td th:text="${#strings.abbreviate(course.courseDescribe,10)}"></td>
            <td>
                <a th:href="@{/admin/picture(url=${course.coursePic},currentIndex=${currentIndex},courseid=${course.courseId})}">查看图片</a></td>
            <td>
                <span class="badge badge-success" th:if="${course.courseStatus==0}">免费</span>
                <span class="badge badge-danger" th:if="${course.courseStatus==1}">会员</span>
            </td>
            <td>
                <a th:href="${course.courseUrl}">课程链接</a>
            </td>
            <td th:text="${course.ctypeName}"></td>
            <td>
                <a type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalId" th:onclick="test([[${course.courseId}]],[[${course.courseName}]],[[${course.courseDescribe}]],[[${course.courseStatus}]],[[${course.courseUrl}]],[[${course.ctypeName}]],[[${currentIndex}]])">修改</a>
                <a type="button" class="btn btn-danger"  th:href="@{/admin/deleteCourse(courseid=${course.courseId},currentIndex=${currentIndex})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" th:href="@{/admin/courseList(currentIndex=${currentIndex -1})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">第[[${currentIndex}]]页</a></li>
            <li class="page-item"><a class="page-link" href="#">共[[${page.getPages()}]]页</a></li>
            <li class="page-item">
                <a class="page-link" th:href="@{/admin/courseList(currentIndex=${currentIndex+1})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- 修改图片以外的信息的模态框 -->
    <div class="modal fade" id="ModalId" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改课程信息</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <!-- 内容主体begin -->
                    <form id="updateForm" th:action="@{/admin/updateCourse}" method="post">
                        <input type="hidden" name="courseId">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" >课程名称</span>
                            </div>
                            <input type="text" class="form-control" placeholder="课程名称" name="courseName" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">课程描述</span>
                            </div>
                            <textarea type="text" id="textarea" class="form-control" placeholder="课程描述" name="courseDescribe" aria-label="Username" aria-describedby="basic-addon1"></textarea>
                        </div>

                        <label for="validationTooltip04">课程状态</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="courseStatus" id="inlineRadio1" value="0">
                            <label class="form-check-label" for="inlineRadio1">
                                <span class="badge badge-success">免费</span>
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="courseStatus" id="inlineRadio2" value="1" checked>
                            <label class="form-check-label" for="inlineRadio2">
                                <span class="badge badge-danger">会员</span>
                            </label>
                        </div>
                        <br>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">课程链接</span>
                            </div>
                            <input type="text" class="form-control" placeholder="课程链接" name="courseUrl" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="col-md-6 mb-6">
                            <label for="validationTooltip04">课程类型</label>
                            <!--                            后台查询出所有的课程类型，遍历出来，value为类型ID，显示的值为类型名称-->
                            <select class="custom-select"  name="ctypeId"  required>
                                <option th:each="type:${allCtype}" th:value="${type.ctypeId}">[[${type.ctypeName}]]</option>
                            </select>
                        </div>
                    </form>
                    <!-- 内容主体end -->
                </div>
                <div class="modal-footer">
                    <button form="updateForm" type="submit" class="btn btn-primary" id="ModalYesId">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>



    <!-- 添加课程的模态框 -->
    <div class="modal fade" id="ModalId2" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel2">添加课程</h4>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <!-- 内容主体begin -->
                    <form id="addForm" th:action="@{/admin/addCourse}" method="post">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">课程名称</span>
                            </div>
                            <input type="text" class="form-control" placeholder="课程名称" name="courseName" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">课程描述</span>
                            </div>
                            <textarea type="text" class="form-control" placeholder="课程描述" name="courseDescribe" aria-label="Username" aria-describedby="basic-addon1"></textarea>
                        </div>

<!--                        给一个默认的图片-->
                        <div style="margin: 0 auto">
                            <label>图片：</label>
                            <label for="upload">
                                <img id="img" th:src="@{https://pic1.zhimg.com/v2-bdf3f643b8d1d6db2922db2c23ac8cff_r.jpg?source=1940ef5c}"  width="200" height="80">
                            </label>
                            <span class="text-secondary">点击上传图片</span>
                            <input name="coursePic" value="https://pic1.zhimg.com/v2-bdf3f643b8d1d6db2922db2c23ac8cff_r.jpg?source=1940ef5c" id="head" hidden>
                            <input id="upload" type="file" hidden>
                        </div>

                        <br>
                        <script>
                            $(function () {
                                $("#upload").change(function () {
                                    let form = new FormData();
                                    form.append("file", $("#upload").prop("files")[0]);
                                    $.ajax({
                                        url: "/image/upload",    //后台url
                                        data: form,
                                        cache: false,
                                        async: false,
                                        type: "POST",          //类型，POST或者GET
                                        dataType: 'json',       //数据返回类型，可以是xml、json等
                                        processData: false,
                                        contentType: false,
                                        success: function (data) {   //成功，回调函数
                                            if (data) {
                                                let url = data.url;
                                                $("#img").attr("src", url);
                                                $("#head").attr("value", url);
                                            } else {
                                                alert("失败");
                                            }
                                        },
                                        error: function (er) {     //失败，回调函数
                                            alert(JSON.stringify(data));
                                        }
                                    });
                                });
                            });
                        </script>

                        <label for="validationTooltip04">课程状态</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="courseStatus" id="exampleRadios1" value="0" checked>
                            <label class="form-check-label" for="exampleRadios1">
                                <span class="badge badge-success">免费</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="courseStatus" id="exampleRadios2" value="1">
                            <label class="form-check-label" for="exampleRadios2">
                                <span class="badge badge-danger">会员</span>
                            </label>
                        </div>
                        <br>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">课程链接</span>
                            </div>
                            <input type="text" class="form-control" placeholder="课程链接" name="courseUrl" aria-label="Username" aria-describedby="basic-addon1">
                        </div>

                        <div class="col-md-6 mb-6">
                            <label for="validationTooltip04">课程类型</label>
<!--                            后台查询出所有的课程类型，遍历出来，value为类型ID，显示的值为类型名称-->
                            <select class="custom-select" id="validationTooltip04" name="ctypeId"  required>
                                <option th:each="type:${allCtype}" th:value="${type.ctypeId}">[[${type.ctypeName}]]</option>
                            </select>
                        </div>
                    </form>
                    <!-- 内容主体end -->
                </div>
                <div class="modal-footer">
                    <button form="addForm" type="submit" class="btn btn-primary" id="ModalYesId2">添加</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>

    function test(courseId,courseName,courseDescribe,courseStatus,courseUrl,ctypeName,currentIndex){
        console.log(courseId,courseName,courseDescribe,courseStatus,courseUrl,ctypeName,currentIndex)
        $("[name='courseId']").attr("value",courseId)
        $("[name='courseName']").attr("value",courseName)
        // $("[name='courseDescribe']").attr("value",courseDescribe)
        // $("[name='courseStatus']").attr("value",courseStatus)
        $("[name='courseUrl']").attr("value",courseUrl)
        $("[name='ctypeName']").attr("value",ctypeName)
        $("[name='currentIndex']").attr("value",currentIndex)
        document.getElementById("textarea").innerText=courseDescribe
    }
</script>
</html>